<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<title></title><!-- 网站作者 -->
    <!-- 网站描述 -->
    <meta name="description" content="本网站为...类型网站，主要服务对象为...">
    <!-- 网站关键词 -->
    <meta name="keywords" content="关键词1，关键词2，...">
    <!-- 禁止链接高亮 -->
    <meta name="msapplication-tap-highlight" content="no">
    <!-- format-detection为格式检测 -->
    <!-- 禁止手机自动将网页中的电话号码显示为拨号的超链接 -->
    <meta name="format-detection" content="telephone=no">
    <!-- 告诉设备不识别邮箱，点击之后不自动发送 -->
    <meta name="format-detection" content="email=no">
    <!-- 禁止跳转至地图功能页面 -->
    <meta name="format-detection" content="adress=no">
    <!-- UC强制竖屏 -->
    <meta name="screen-orientation" content="portrait"> 
    <!-- QQ强制全屏 -->
    <meta name="x5-fullscreen" content="true" />
    <!-- 360-优先使用 IE 最新版本和 Chrome进行渲染 -->
    <meta http-equiv="X-UA-Compatible" content="IE=Edge,chrome=1">
    <!-- 网页标题 -->
    <title>网页标题</title>
    <!-- 移动端初始化样式表 -->
    <link rel="stylesheet" type="text/css" href="js/reset.css">
    <!-- 自定义样式表 -->
    <link rel="stylesheet" type="text/css" href="">
    <!-- 引入flexible.js或者flexible_simplify.js精简版，解决rem适配与机型计算问题 -->
    <script type="text/javascript" src="js/flexible.js"></script>
    <!-- 引入fastClick插件解决移动端点击300ms延迟问题 -->
    <script type="text/javascript" src="js/fastclick.js"></script>
    <!-- 实例化fastclick -->
    <script type="text/javascript">
        if ('addEventListener' in document) {
            document.addEventListener('DOMContentLoaded', function() {
                FastClick.attach(document.body);
            }, false);
        }
    </script>
		
		<meta name="description" content="本页所有尺寸都使用rem布局，也是移动端开发app常用尺寸" />
		<meta name="viewport" content="width=device-width,initial-scale=1.0,maximum-scale=1.0, user-scalable=no"/>
		<style type="text/css">
			*{
				margin: 0;
				padding: 0;
			}
			.container{
				width: 100%;
				margin: 0 auto;
				max-width:9rem;
				min-width: 320px;
				position: relative;
			}
			.nav_area{
				width: 100%;
				height:1.2rem ;
				background: url(img/nav.png);
				background-repeat: no-repeat;
				background-size: 100% 100%;
				background-position: center;
				position: fixed;
				z-index: 999;
				display: flex;
				align-items: center;
				left: 0px;
				top: 0px;
				margin: 0 auto;
			}
			.nav_area>a>img {
				margin-left: 0.5rem;
				width: 0.4rem;
				height: 0.58rem;
			}
			.nav_area>p{
				text-align: center;
				width: 100%;
				height: 100%;
				font-size: 0.45rem;
				line-height: 1.2rem;
				color: white;
			}
			.ban{
				width: 9.3rem;
				height: 0.8rem;
				display: flex;
				margin: 0 auto;
				flex-wrap: wrap;
				font-size: 0.32rem;margin-top: 2rem;
			}
			.ban>input{
                width:0.3rem ;
                height:0.3rem ;
                background: red;
                margin-top: 0.25rem;
			}
			.ban>.mian{
				line-height: 0.8rem;
				margin-left: 0.5rem;
			}
			.ban>.mian>span{
				color: gray;
			}
			.liang{
				width:8rem;
				height: 0.6rem;
				display: flex;
				justify-content: space-around;
				margin: 0 auto;
			}
			.liang>button{
				width:3.2rem ;
				height: 0.6rem;
				border: 1px solid gray;
				background: white;
				font-size: 0.32rem;
				cursor: pointer;
			}
			.liang>.gaib{
				background: #f23a38;
				color: white;
				border: none;
			}
			.liang1{
				width:8rem;
				height: 0.6rem;
				display: flex;
				justify-content: space-between;
				margin: 0 auto;
			}
			.liang1>button{
				width:2rem ;
				height: 0.6rem;
				border: 1px solid gray;
				background: white;
				font-size: 0.32rem;
				cursor: pointer;
			}
			.liang1>.gaib1{
				background: #f23a38;
				color: white;
				border: none;
			}
			.ban1{
				width:9.3rem;
				height: 0.8rem;
				margin: 0 auto;
				margin-top: 0.5rem;
				display: flex;
				flex-wrap: wrap;
				font-size: 0.32rem;
			}
			.ban1>input{
                width:0.3rem ;
                height:0.3rem ;
                background: red;
                margin-top: 0.25rem;
			}
			.ban1>.mian{
				line-height: 0.8rem;
				margin-left: 0.5rem;
			}
			.ban2{
				width:9.3rem;
				height: 0.8rem;
				margin: 0 auto;
				margin-top: 0.5rem;
				display: flex;
				flex-wrap: wrap;
				font-size: 0.32rem;
			}
			.ban2>input{
                width:0.3rem ;
                height:0.3rem ;
                background: red;
                margin-top: 0.25rem;
			}
			.ban2>.mian{
				line-height: 0.8rem;
				margin-left: 0.5rem;
			}
			.ul1{
				width: 9.3rem;
				height: 4.8rem;
				margin: 0 auto;
				display: flex;
				flex-wrap: wrap;
			}
			.ul1>ul>li{
				width: 9.3rem;
				height: 0.66rem;
			}
			.anniu {
				width: 100%;
				height: auto;
				display: flex;
				justify-content: center
			}
			
			.anniu>button {
				width: 4.2rem;
				height: 1.06rem;
				background: #f23a38;
				border-radius: 15px;
				border: none;
				color: white;
			
			}
		</style>
	</head>
	<body>
		<div class="container">
			<div class="nav_area">
				<a href="#" class="aaa"><img src="img/fanhui@2x.png"/></a>
				<p>服务承诺设置</p>
			</div>
			<div class="ban">
				<input type="radio" /><div class="mian">免费板楼<span>（超出每层收费10元/件（单件25公斤以上））</span></div>
			</div>
			<div class="liang">
				<button class="gaib">三楼及三楼以下免费</button>
				<button>七楼及七楼以下免费</button>
			</div>
			<div class="ban1">
				<input type="radio" /><div class="mian">无物流地址，超出30公里收费</div>
			</div>
			<div class="liang1">
				<button class="gaib1">3元/公里</button>
				<button>4元/公里</button>
				<button>5元/公里</button>
			</div>
			<div class="ban2">
				<input type="radio" /><div class="mian">可提供免费仓储</div>
			</div>
			<div class="ul1">
				<ul>
					<li>基本服务承诺（表示师傅默认支持，不可更改）</li>
					<li>支持喵/旺师傅核销</li>
					<li>共跑费（配送费50元/次、安装、维修30/次）</li>
					<li>安装、维修一个月免费检修</li>
					<li>到货通知后2个小时内完成预约</li>
					<li>1次上门费用（提货安装80元/次，安装、维修40元/次 ）</li>
				</ul>
			</div>
			<div class="anniu">
				<button class="deng">师傅违规处罚规则</button>
			</div>
		</div>
	</body>
	<script src="js/flexible.js" type="text/javascript" charset="utf-8"></script>
	<script src="js/jquery-3.4.1.js" type="text/javascript" charset="utf-8"></script>
	<script type="text/javascript">
		$(function(){
			$li=$(".liang button");
			for(var i =0;i<$li.length+1;i++){
				$li.eq(i).click(function(){
					for(var i =0;i<$li.length+1;i++){
						$(this).attr("class","gaib")
						$li.eq(i).removeAttr("class","")
					}
				})
			}
			$li1=$(".liang1 button");
			for(var i =0;i<$li1.length+1;i++){
				$li1.eq(i).click(function(){
					for(var i =0;i<$li1.length+1;i++){
						$(this).attr("class","gaib1")
						$li1.eq(i).removeAttr("class","")
					}
				})
			}
			$(".deng").click(function(){
				location.href="好评特权.html"
			})
			$(".aaa img").click(function(){
			     location.history.go(-1)
			})
		})
	</script>
</html>
